feat(ui): update status labels to follow consistent design pattern by rsun19 · Pull Request #2523 · kubeflow/hub

rsun19 · 2026-04-01T15:38:50Z

Description

Updates status labels across the Model Registry UI:

Styling convention:

Interactive labels (clicking opens a popover or modal) use variant="filled"
Non-interactive labels use variant="outline"

Model Registry Settings (ModelRegistryTableRowStatus):

Renamed status labels: Available → Ready, Progressing → Starting
Added new Stopping status (triggered when metadata.deletionTimestamp is set)
Applied filled/outline variant based on interactivity

Model Transfer Jobs (ModelTransferJobTableRow / ModelTransferJobStatusModal):

Changed Pending label color from grey → purple
Changed Cancelled label text to Canceled
Added explicit variant="filled" on interactive table row label
Added variant="outline" on non-interactive modal label

Catalog Source Settings (CatalogSourceStatus / CatalogSourceStatusErrorModal):

Added variant="outline" to all non-interactive status labels: Connected, Failed, Starting, Unknown

Archive Details (RegisteredModelArchiveDetails, ModelVersionArchiveDetails, ArchiveModelVersionDetails):

Added variant="outline" to non-interactive "Archived" labels

BFF Mock Data (model_registry_settings_handler.go):

Added DeletionTimestamp field to Metadata struct
Extended createSampleModelRegistry to accept deletionTimestamp and conditions parameters
Added mock registries for each status (Ready, Starting, Stopping, Degrading, Unavailable) alongside existing mocks

How Has This Been Tested?

Added unit tests for ModelRegistryTableRowStatus: Stopping status, deletionTimestamp priority, and variant assertions (outline for non-interactive, filled for interactive)
Added unit tests for getStatusLabel: all 5 transfer job statuses with correct labels and colors
Added unit test for ModelTransferJobStatusModal: outline variant assertion
Created new CatalogSourceStatus.spec.tsx test suite: variant assertions for Connected, Failed, Starting, Unknown labels plus default/disabled source handling
Updated Cypress test assertion for Cancelled → Canceled
All 32 unit tests pass

Merge criteria:

All the commits have been signed-off (To pass the DCO check)
The commits have meaningful messages
Automated tests are provided as part of the PR for major new functionalities; testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
The developer has manually tested the changes and verified that the changes work.
Code changes follow the kubeflow contribution guidelines.
For first time contributors: Please reach out to the Reviewers to ensure all tests are being run, ensuring the label ok-to-test has been added to the PR.

If you have UI changes

The developer has added tests or explained why testing cannot be added.
Included any necessary screenshots or gifs if it was a UI change.
Verify that UI/UX changes conform the UX guidelines for Kubeflow.

manaswinidas

Nice cleanup overall — the filled/outline convention and label renames look good. Left a couple of inline comments: one potential issue with the shared type for deletionTimestamp, one stale test name, and a nit on test coverage.

manaswinidas · 2026-04-02T13:44:02Z

-        <ModelRegistryTableRowStatus conditions={mr.status?.conditions} />
+        <ModelRegistryTableRowStatus
+          conditions={mr.status?.conditions}
+          deletionTimestamp={mr.metadata.deletionTimestamp}


Does the ModelRegistryKind type from mod-arch-shared actually include deletionTimestamp on its metadata? If not, this silently passes undefined and the "Stopping" status becomes dead code. Please verify the shared type has this field — otherwise the BFF model was updated but the frontend type contract doesn't match.

Verified — ModelRegistryKind is K8sResourceCommon & { metadata: { name, namespace, ... } }. The K8sResourceCommon type (from mod-arch-shared@1.12.0 in dist/types/common.d.ts) defines metadata as Partial<{ ..., deletionTimestamp: string, ... }>. TypeScript intersects both metadata shapes, so deletionTimestamp is available as an optional string. The Go BFF also includes it as *time.Time with omitempty, so the field is only present in the JSON when the resource is being deleted.

https://github.com/opendatahub-io/mod-arch-library/blob/main/mod-arch-shared/types/common.ts#L24

manaswinidas · 2026-04-02T13:44:03Z

-    expect(screen.getByText('Available')).toBeVisible();
+    expect(screen.getByText('Ready')).toBeVisible();
  });
  it('renders "Progressing" status', async () => {


This test is titled "Progressing" but actually asserts screen.getByText('Unavailable') (line 191). Since this PR renames all the other test titles to match the new label names (Available → Ready, Progressing → Starting), this pre-existing mislabel should be fixed here too — otherwise it's the only test title that doesn't match what it verifies.

Good catch — fixed. Renamed the test title from "Progressing" to "Unavailable" to match the actual assertion.

manaswinidas · 2026-04-02T13:44:04Z

+import { ModelTransferJobStatus } from '~/app/types';
+import { getStatusLabel } from '~/app/pages/modelRegistry/screens/ModelTransferJobs/ModelTransferJobTableRow';
+
+describe('getStatusLabel', () => {


Nit: These 5 tests mirror the switch cases 1:1 without testing edge cases (default branch, icon return value). Consider adding a test for an unknown/unexpected status value to cover the default branch, and optionally asserting icon — otherwise these are just restating the implementation as assertions.

Done — consolidated the 5 individual tests into a single it.each table, added icon assertion (toBeDefined()), and added a new test for an unknown status value that covers the default branch (asserts raw status string, grey color, and null icon).

manaswinidas · 2026-04-02T13:45:29Z

@@ -0,0 +1,34 @@
+import { ModelTransferJobStatus } from '~/app/types';


This can be removed mostly

Refactored — consolidated the verbose per-status tests into a compact it.each table and added a default-branch edge case test. Much leaner now.

rsun19 · 2026-04-02T19:56:28Z

In useModelTransferJobs.spec.ts, I also fixed this warning: A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.

Misjohns · 2026-04-06T17:44:43Z

@rsun19 I was out on PTO last week. Took a look at the screen caps and have the following comments:

Model Registry UI

Why is the “Starting” in purple on the 6th line? The others are in gray.

Model transfer jobs

These labels should match the colors in the figma
- Failed: #b1380b
- Complete: #3d7317
- Running: #0066cc

Model transfer jobs modal

Failed: Use #b1380b for both the outline and fa-exclamation-circle icon

rsun19 · 2026-04-06T18:53:38Z

@Misjohns updated, here are the new screenshots:

Misjohns · 2026-04-07T13:09:41Z

LGTM Thank you @rsun19

rsun19 · 2026-04-09T13:04:10Z

cc @christianvogt @lucferbux @jenny-s51

rsun19 · 2026-04-09T14:13:59Z

/hold

rsun19 · 2026-04-09T14:25:13Z

/unhold

rsun19 · 2026-04-09T14:27:39Z

/hold

christianvogt · 2026-04-09T14:28:04Z

We need to validate the material UI components function with these changes and if we need any theme fixes.
@jenny-s51 can help with guiding theme changes if necessary

rsun19 · 2026-04-16T17:40:41Z

Blocked by #2598

manaswinidas · 2026-04-21T05:57:31Z

#2598 is merged

lucferbux · 2026-04-27T10:40:24Z

@jenny-s51 are those changes validated, I've run it after rebasing with main and everything looks fine, but I don't have full context, can you take a look and if everything looks great we can lgtm and approve

Signed-off-by: rsun19 <robertssun1234@gmail.com>

rsun19 · 2026-04-27T13:31:15Z

/unhold

Signed-off-by: rsun19 <robertssun1234@gmail.com>

rsun19 · 2026-04-27T13:42:19Z

jenny-s51

Thanks @rsun19 - LGTM, verified in the MR hub UI - labels look and work as expected with the bump to v1.15.4 of the mod arch library packages. 🎉

This PR is ready to approve at your convenience @lucferbux - thank you 🙏

manaswinidas · 2026-04-27T15:40:25Z

/approve

google-oss-prow · 2026-04-27T15:40:34Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: manaswinidas

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~clients/ui/OWNERS~~ [manaswinidas]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

google-oss-prow Bot requested review from chambridge and fege April 1, 2026 15:39

google-oss-prow Bot added the size/L label Apr 1, 2026

rsun19 changed the title ~~updated status labels, mocks, and unit tests~~ feat(ui): update status labels to follow RHOAI design pattern Apr 1, 2026

github-actions Bot added the Area/UI label Apr 1, 2026

rsun19 changed the title ~~feat(ui): update status labels to follow RHOAI design pattern~~ [wip] feat(ui): update status labels to follow RHOAI design pattern Apr 1, 2026

google-oss-prow Bot added the do-not-merge/work-in-progress label Apr 1, 2026

rsun19 changed the title ~~[wip] feat(ui): update status labels to follow RHOAI design pattern~~ feat(ui): update status labels to follow RHOAI design pattern Apr 1, 2026

google-oss-prow Bot removed the do-not-merge/work-in-progress label Apr 1, 2026

rsun19 mentioned this pull request Apr 1, 2026

Update status labels opendatahub-io/odh-dashboard#6746

Merged

7 tasks

manaswinidas reviewed Apr 2, 2026

View reviewed changes

rsun19 force-pushed the update-status-labels branch from ba9f053 to 6a7b4b4 Compare April 2, 2026 19:57

rsun19 requested a review from manaswinidas April 9, 2026 13:03

rsun19 changed the title ~~feat(ui): update status labels to follow RHOAI design pattern~~ feat(ui): update status labels to follow consistent design pattern Apr 9, 2026

google-oss-prow Bot added the do-not-merge/hold label Apr 9, 2026

google-oss-prow Bot removed the do-not-merge/hold label Apr 9, 2026

google-oss-prow Bot added the do-not-merge/hold label Apr 9, 2026

rsun19 added 3 commits April 27, 2026 09:29

updated status labels, mocks, and unit tests

4ceb209

Signed-off-by: rsun19 <robertssun1234@gmail.com>

addressed comments

cc947a2

Signed-off-by: rsun19 <robertssun1234@gmail.com>

updated labels to reflect correct status color

99c0fee

Signed-off-by: rsun19 <robertssun1234@gmail.com>

rsun19 force-pushed the update-status-labels branch from 0b6e51b to 99c0fee Compare April 27, 2026 13:30

google-oss-prow Bot removed the do-not-merge/hold label Apr 27, 2026

fixed failing test

90bc812

Signed-off-by: rsun19 <robertssun1234@gmail.com>

jenny-s51 approved these changes Apr 27, 2026

View reviewed changes

google-oss-prow Bot assigned jenny-s51 Apr 27, 2026

google-oss-prow Bot added the lgtm label Apr 27, 2026

google-oss-prow Bot added the approved label Apr 27, 2026

google-oss-prow Bot merged commit d6549fe into kubeflow:main Apr 27, 2026
28 checks passed

		@@ -0,0 +1,34 @@
		import { ModelTransferJobStatus } from '~/app/types';

Conversation

rsun19 commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Merge criteria:

Uh oh!

manaswinidas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rsun19 commented Apr 2, 2026

Uh oh!

Misjohns commented Apr 6, 2026

Uh oh!

rsun19 commented Apr 6, 2026

Uh oh!

Misjohns commented Apr 7, 2026

Uh oh!

rsun19 commented Apr 9, 2026

Uh oh!

rsun19 commented Apr 9, 2026

Uh oh!

rsun19 commented Apr 9, 2026

Uh oh!

rsun19 commented Apr 9, 2026

Uh oh!

christianvogt commented Apr 9, 2026

Uh oh!

rsun19 commented Apr 16, 2026

Uh oh!

manaswinidas commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucferbux commented Apr 27, 2026

Uh oh!

rsun19 commented Apr 27, 2026

Uh oh!

rsun19 commented Apr 27, 2026

Uh oh!

jenny-s51 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manaswinidas commented Apr 27, 2026

Uh oh!

google-oss-prow Bot commented Apr 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

rsun19 commented Apr 1, 2026 •

edited

Loading

manaswinidas commented Apr 21, 2026 •

edited

Loading

jenny-s51 left a comment •

edited

Loading